<template>
  <div id="mine-withdraw-detail">
    <empty-message message="暂无提现记录" v-if="!lists.length"></empty-message>
    <ul>
      <li v-for="(item, index) in lists" :key="index">
        <section>
          <p>提现</p>
          <p>{{ item.update_time }}</p>
        </section>
        <section>
          <p>-{{ item.amount }}</p>
          <p>{{ item.balance }}</p>
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
  import EmptyMessage from '../comp/empty-message.vue';
  export default {
    name: "mine-withdraw-detail",
    components: {
      EmptyMessage
    },
    data() {
      return {
        lists: []
      }
    },
    created() {
      this.$http.post({
        api: this.$api.USER_WITHDRAW_DETAIL,
        params: {
          user_id: localStorage.getItem('id')
        },
        success: (res) => {
          this.lists = res.data.data;
        }
      })
    }
  }
</script>

<style scoped lang="scss">

  #mine-withdraw-detail {
    >ul {
      background: $white;

      >li {
        display: flex;
        justify-content: space-between;
        height: 5rem;
        padding: 0 1rem;
        border-bottom: 1px solid #eee;

        >section {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: $size-as-parent;

          >p:first-of-type {
            font-size: 1.5rem;
            color: #333;
            font-weight: bold;
          }

          >p:last-of-type {
            font-size: 1.1rem;
            color: #999;
          }
        }
      }
    }
  }
</style>
